<template>

  <div>

    <!--      查询参数-->
    <div style="margin-top: 30px">

      <el-form :inline="true" :model="queryData" class="demo-form-inline">

        <el-row>
          <el-col :span="8">
            <el-form-item label="解约协议编号:" style="margin-left: 20px">
              <el-input v-model="queryData.terminationNo" placeholder="请输入收房合同编号" style="width: 200px"></el-input>
            </el-form-item>
            </el-col>

          <el-col :span="16">
            <el-form-item label="录入人:" >
              <el-input v-model="queryData.inputUserName" placeholder="请输入录入姓名" style="margin-left: 43px ; width: 216px"></el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="8">
            <el-form-item label="小区名称:" style="margin-left: 20px">
              <el-input v-model="queryData.premiseName" placeholder="请输入收房合同编号" style="margin-left: 28px ; width: 200px"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="16">
            <el-form-item label="协议录入日期:">
              <el-date-picker value-format="yyyy-MM-dd" v-model="queryData.startDate" type="date" placeholder="选择日期"></el-date-picker>
              至
              <el-date-picker value-format="yyyy-MM-dd" v-model="queryData.endDate" type="date" placeholder="选择日期"></el-date-picker>
            </el-form-item>
          </el-col>
        </el-row>

          <el-form-item>
            <el-button type="primary" @click="getTableData" style="margin-left:1000px">查询</el-button>
            <el-button @click="queryClean" style="margin-left:50px">清空</el-button>
          </el-form-item>
      </el-form>

    </div>
    <!--    数据展示-->
    <div>
      <el-table
        :data="tableData" border style="width: 100%">
        <el-table-column prop="cfTerminationNo" label="解约合同编号" ></el-table-column>
        <el-table-column prop="premiseName" label="小区" ></el-table-column>
        <el-table-column prop="terminationType" label="解约类型"></el-table-column>
        <el-table-column prop="terminationDate" label="解约日期"></el-table-column>
        <el-table-column prop="auditDate" label="审核日期"></el-table-column>
        <el-table-column prop="finalStatement" label="结算金额"></el-table-column>
        <el-table-column prop="inputDate" label="录入日期"></el-table-column>
        <el-table-column prop="inputUserName" label="录入人"></el-table-column>
      </el-table>
    </div>

    <!--    分页-->
    <div style="margin-left: 1000px">

      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="queryData.pageNum"
        :page-size="queryData.pageSize"
        background
        layout="prev, pager, next"
        >
<!--        :total="queryData.total"-->
      </el-pagination>
    </div>

  </div>

</template>

<script>
import {getCfTerminationData} from "@/api/houses/housing/hous";
export default {
  name: "terminationList",
  data(){
    return{

      queryData:{
        pageSize:10,
        pageNum:1,
        total:"",
        terminationNo:"",
        premiseName:"",
        inputUserName:"",
        startDate:"",
        endDate:"",
      },
      tableData:[],
    }
  },
  methods:{
    //查询
    getTableData(){
      getCfTerminationData(this.queryData).then(res=>{
        console.log(JSON.stringify(res))
        this.tableData = res.data.list
        this.queryData.total = res.data.total
      })

    },
    //清空
    queryClean(){
      let pageNum = this.queryData.pageNum
      let pageSize = this.queryData.pageSize
      let total = this.queryData.total
      this.queryData={}
      this.queryData.pageNum = pageNum
      this.queryData.pageSize = pageSize
      this.queryData.total = total
    },
    handleSizeChange(val) {
      this.queryData.pageSize = val
      this.getTableData()
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      this.queryData.pageNum = val
      this.getTableData()
      console.log(`当前页: ${val}`);
    }

  },
  mounted() {
    this.getTableData()
  }
}
</script>

<style scoped>

</style>
